<template>
	<view class="page" style="padding: 3% 3%;">
		<Navbar title="个人基本信息"></Navbar>
		<view class="form">
			<view class="form-data">
				<view class="label">姓名</view>
				<input class="value" type="text" placeholder="请输入真实姓名" value="" />
			</view>
			<view class="form-data">
				<view class="label">性别</view>
				<view class="u-flex value" style="padding: 0 30rpx">
					<u-radio-group v-model="sex" width="150rpx">
						<u-radio @change="radioChange" v-for="(item, index) in radioList" :key="index"
							:name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="form-data">
				<view class="label">出生日期</view>
				<view class="value u-flex" @click="showTime = true">
					<text class="u-tips-color u-padding-right-10">请选择</text>
					<image style="width: 13rpx;height: 24rpx;" src="/static/image/icon-right.png"></image>
				</view>
			</view>
			<view class="form-data">
				<view class="label">家庭住址</view>
				<input class="value" type="text" placeholder="填写地址" value="" />
<!-- 				<button class="u-reset-button get-phone">获取地址</button> -->
			</view>
		</view>

		<view style="height: 200rpx;"></view>
		<!-- <view class="u-flex footer-button">
			<view class="u-flex-1"><u-button type="primary" shape="circle"> 确认 </u-button></view>
		</view> -->

		<u-picker mode="time" v-model="showTime" :params="paramsTime" @confirm="confirmTime"></u-picker>
		<u-picker mode="region" v-model="showRegion"></u-picker>
		<u-select v-model="showEducation" :list="educationList"></u-select>
		<u-select v-model="showNation" :list="nationList"></u-select>
		<u-select v-model="showMarriage" :list="marriageList"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					// 城市
					// 手机号码
					// 真实姓名
					// 身份证号码
					// 性别
					// 出生日期
					// 籍贯
					// 学历
					// 民族
					// 婚姻状况
					// 家庭住址
					// 岗位类型
					// 工作能力
					// 工作经验
					// 期望每月工资
					// 期望每月休息天数
					// 个人特长
					// 自我介绍
					city: '',
					tel: '',
					came: '',
					idNo: '',
					gender: '',
					birthDate: '',
					dDomicilePlace: '',
					education: '',
					nation: '',
					mMaritalStatus: '',
					address: '',
					workingType: '',
					abilityType: '',
					workExp: '',
					wWage: '',
					restDays: '',
					speciality: '',
					comment: ''
				},
				radioList: [{
						name: '女'
					},
					{
						name: '男'
					}
				],
				sex: '男',
				showTime: false,
				paramsTime: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showRegion: false,
				showEducation: false,
				educationList: [{
						value: '1',
						label: '本科'
					},
					{
						value: '2',
						label: '大专'
					},
					{
						value: '3',
						label: '高中'
					},
					{
						value: '4',
						label: '初中'
					},
					{
						value: '5',
						label: '小学'
					}
				],
				showNation: false,
				nationList: [{
						value: '1',
						label: '汉族'
					},
					{
						value: '2',
						label: '维吾尔族'
					},
					{
						value: '3',
						label: '壮族'
					},
					{
						value: '4',
						label: '回族'
					},
					{
						value: '5',
						label: '其它民族'
					}
				],
				showMarriage: false,
				marriageList: [{
						value: '1',
						label: '已婚'
					},
					{
						value: '2',
						label: '未婚'
					}
				]
			};
		},
		methods: {
			radioChange(e) {
				this.sex = e;
			},
			confirmTime(e) {
				console.log(e);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f4f5f7;
	}

	.form {
		padding: 10rpx 20rpx 20rpx;
		background-color: #fff;
	}

	.form-data {
		position: relative;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #dcdcdc;

		&:last-child {
			border: none;
		}

		.label {
			font-size: 28rpx;
			font-weight: 600;
		}

		.value {
			height: 70rpx;
		}

		.get-phone {
			position: absolute;
			bottom: 15rpx;
			right: 20rpx;
			color: $u-type-primary;
		}
	}

	.footer-button {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 98rpx;
		padding: 13rpx 20rpx;
		background-color: #ffffff;

		image {
			width: 58rpx;
			height: 58rpx;
			margin-right: 30rpx;
		}
	}
</style>